<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>添加/编辑论坛文章</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="110px">
          <el-form-item label="文章标题:" prop="title">
            <el-input v-model="infoForm.title" placeholder="文章标题"></el-input>
          </el-form-item>
          <el-form-item label="文章版块:" prop="plate_id">
            <el-select v-model="infoForm.plate_id" placeholder="文章版块" class="w-140 mr-10">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in typeList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知范围:">
            <el-radio-group v-model="infoForm.type" @change="radiochangeTab">
              <el-radio :label="0">全校职工</el-radio>
              <el-radio :label="1">特定职工</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择特定职工:" v-if="infoForm.type==1">
            <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">选择通知的职工</el-button>
            <div>
              <el-tag
                  :key="index"
                  v-for="(tag,index) in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(index)"
                  class="mr-10"
              >{{ tag }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="生成二维码:">
            <el-radio-group v-model="infoForm.is_parents">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="附件上传:">
<!--            accept=".zip"-->
            <uploadFileModle number="20" @getFile="getFile" ref="uploadFileModle" :sycnStatus="true"
                             fileType="interaction_add"></uploadFileModle>
<!--            <el-upload-->
<!--                class="upload-demo"-->
<!--                :action="imgSrcHttp"-->
<!--                :on-remove="handleRemove"-->
<!--                :on-success="handleSuccess-->
<!--"-->
<!--                :before-upload="beforeAvatarUpload"-->
<!--                :file-list="fileList"-->
<!--                multiple-->
<!--                :limit="20">-->
<!--              <el-button size="small" class="el-icon-upload">点击上传相应文件</el-button>-->
<!--              <div slot="tip" class="el-upload__tip">上传zip文件</div>-->
<!--            </el-upload>-->
          </el-form-item>
          <el-form-item label="文章内容:" prop="body">
            <div class="edit_container">
              <quill-editor v-model="infoForm.body"
                            ref="myQuillEditor"
                            class="editer"
                            :options="editorOption"
                            placeholder="通知内容">
              </quill-editor>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
        <el-button size="small" type="primary" @click.native="editSubmit">确认提交</el-button>
      </div>
    </div>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                          :usersectionId="infoForm.section_id"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
  </div>
</template>

<script>
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import quillConfig from '@/assets/js/quill-config.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {mapGetters} from "vuex";

export default {
  props: ['visible', 'licenceId'], // commoent 学生点评 collection 学生采集
  components: {
    quillEditor
  },
  data() {
    return {
      studentVisible: false,
      dialogVisible: false,
      fileList: [],
      infoForm: {
        title: '', // 	字符串 	必填 	1 	- 	标题
        user_ids: 0,
        plate_id: '', //
        type: 0,
        body: '', // 	字符串 	必填 	1 	- 	内容
        is_parents: 1, // 	字符串 	必填 	0否 1是 	- 	是否生成二维码
        file: '' // 附件
      },
      rules: {
        title: [
          {required: true, message: '填写文章标题', trigger: 'blur'}
        ],
        body: [
          {required: true, message: '填写文章内容', trigger: 'blur'}
        ],
        plate_id: [
          {required: true, message: '请选择文章板块'}
        ]
      },
      editorOption: quillConfig,
      typeList: [],
      dynamicTags: [],
      dynamicTagsId: [],
      dynamicTagsArray: {},
      imgSrcHttp:  this.api.common.office
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (this.licenceId) {
          this.getDetail();
        }
      } else {
        this.infoForm = {
          title: '', // 	字符串 	必填 	1 	- 	标题
          user_ids: 0,
          plate_id: '', //
          type: 0,
          body: '', // 	字符串 	必填 	1 	- 	内容
          is_parents: 1, // 	字符串 	必填 	0否 1是 	- 	是否生成二维码
          file: '' // 附件
        }
        this.fileList = []
      }
    }
  },
  created() {
    this.cateFn()
  },
  methods: {
    getFile(option) {
      console.log('收到附件数据：', option)
      this.fileList = this.getJson(option)
    },
    async cateFn() {
      let data = await this.$fetch(this.api.forum_plate_index, {p: 1, user_id: this.userInfo.id});
      console.log('获取的内容：', data)
      this.typeList = data.list.data
    },
    radiochangeTab() {
      this.infoForm.user_ids = 0
      this.dynamicTags = []
      this.dynamicTagsId = []
      this.dynamicTagsArray = {}
    },
    studentFn(option) {
      this.dynamicTags = []
      for (let i in option) {
        this.dynamicTags.push(option[i].realname)
        this.dynamicTagsId.push(option[i].id)
        this.dynamicTagsArray = option
      }
      this.infoForm.user_ids = this.dynamicTagsId.join(',')
    },
    getDetail() {
      this.$fetch(this.api.licence.edit, {id: this.licenceId}).then((response) => {
        if (!response.code) {
          this.editForm.name = response.vo.name;
          this.editForm.user_id = response.vo.user ? response.vo.user.id : '';
          this.examine_user = this.getJson(response.vo.user)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
      delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.users = this.dynamicTagsId.join(',')
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    chooseStudent() {
      this.studentVisible = true
    },
    // 提交数据
    async editSubmit() {
      if (!this.infoForm.title) {
        this.$message.error('请填写文章标题')
        return
      }
      if (!this.infoForm.plate_id) {
        this.$message.error('请选择文章板块')
        return
      }

      if (this.infoForm.type === 1 && !this.infoForm.user_ids) {
        this.$message.error('请选择通知的职工')
        return
      }
      if (!this.infoForm.body) {
        this.$message.error('请填写文章内容')
        return
      }
      let url_ = this.api.forum_postings_add;
      if (this.editId) {
        url_ = this.api.forum_postings_edit;
        this.infoForm.id = this.editId;
      }
      let data_ = JSON.parse(JSON.stringify(this.infoForm))
      let file = []
      for (let item of this.fileList) {
        let a = {}
        a.name = item.name
        a.src = item.src
        file.push(a)
      }

      data_.file = JSON.stringify(file)

      let data = await this.$post(url_, data_);
      if (!data.code) {
        if (!this.editId) {
          this.infoForm = {
            title: '', // 	字符串 	必填 	1 	- 	标题
            user_ids: 0,
            // plate_id: '', //
            type: 0,
            body: '', // 	字符串 	必填 	1 	- 	内容
            is_parents: 1, // 	字符串 	必填 	0否 1是 	- 	是否生成二维码
            file: '' // 附件
          }
          this.dynamicTags = []
          this.dynamicTagsId = []
          this.dynamicTagsArray = {}
        }
        this.$message.success('编辑成功')
        this.closePOpup()
      } else {
        this.$message.error(data.msg)
      }
    },
    beforeAvatarUpload(file) {
      console.log('上传数据excel：', file)
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isLt2M
    },
    handleSuccess(response) {
      console.log('文件：', response)
      this.infoForm.file = response.data.pic
    },
    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
      this.infoForm.file = ''
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 70%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.hearder-search {
  display: flex;
  align-items: center;
}
</style>


